<!--发起跟单-->
<template>
  <div class="bg bg1">
    <scroller class="scroller">
      <div class="wrapper" v-if="isShow">
        
        <!--投入限制-->
        <div>
          <div class="height60"></div>
          <div class="row acenter">
            <text class="font28 text2">{{T('跟单投入资金限制')+'   '}}</text>
            <text class="font24 text3">{{T('范围')+followMap.minInvest+'～'+followMap.maxInvest}}</text>
          </div>

          <div class="row">
            <div :class="['input', 'width252', 'bg3', inputSelect == 1 ? 'main-b1' : '']">
              <input class="input-content font28 text1" ref="num" v-model="minInvest" type="number" :placeholder="T('最小投入')"  @focus="(inputSelect = 1)" @blur="(inputSelect = 0)">
            </div>
            <div class="all"></div>
            <div :class="['input', 'width380', 'bg3', inputSelect == 2 ? 'main-b1' : '']">
              <input class="input-content font28 text1" ref="num" v-model="maxInvest" type="number" :placeholder="T('最大投入')" @focus="(inputSelect = 2)" @blur="(inputSelect = 0)">
              <div class="input-line no1"></div>
              <text class="font28 text2">{{'USDT'}}</text>
            </div>
          </div>
          <div class="height40"></div>
          <div class="row">
            <text class="font28 text2">{{T('您投入的资金为')}}</text>
            <text class="font28 text1">{{' '+investNum + ' ' + investCoin}}</text>
            <text class="font28 text2" v-if="investCoin != 'USDT'">{{' '+T('折合')}}</text>
            <text class="font28 text1" v-if="investCoin != 'USDT'">{{' '+investUsdt + ' USDT'}}</text>
          </div>
          <div class="height24"></div>
          <text class="limit-tipe font24 text3">{{T('* 跟单投入资金限制，需综合考虑设置的策略参数适用范围')}}</text>
        </div>

        <!--信息-->
        <FollwSetInfo ref="info" :followName="T(followName)" :marks="mark"></FollwSetInfo>

        <!--佣金-->
        <LInput class="money" v-model="commission" :title="T('每日佣金')" :limits="''" :tips="T('每日佣金')" :unit="'VTN/'+T('日')"></LInput>
        <LSwitc class="switc" v-model="isVtnEquity" :title="T('是否包含提现权益')"></LSwitc>

        <!--提示-->
        <div>
          <div class="line bg3"></div>
          <text class="font28 text2">{{T('提示')}}</text>
          <div class="height24"></div>
          <text class="font24 text2">{{T('1、已经发起的跟单付费方式及其数值不可修改')}}</text>
          <div class="height24"></div>
          <text class="font24 text2">{{T('2、您可以在策略执行一段时间后再发起跟单')}}</text>
          <div class="height40"></div>
        </div>
      </div>
    </scroller>

    <!--启动-->
    <div class="ok bg3">
      <div class="ok-but bg4" @click="backClick">
        <text class="font32 text1">{{T('取消')}}</text>
      </div>
      <div class="ok-but main1" @click="okClick">
        <text class="font32 text1">{{T('确认')}}</text>
      </div>
    </div>
  </div>
</template>

<script>

//组件
import FollwSetInfo from '@/strategy/view/FollwSetInfo.vue' 
import LInput from '@/public/view/LInput.vue' 
import LSwitc from '@/public/view/LSwitc.vue' 

//功能
import navigator from "@/_js/navigator"; 
import modal from "@/_js/modal";
import math from "@/_js/math";
import broadcast from "@/_js/broadcast";

import weexHttp from "@/_js/https"; ;
const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T('开放跟单'));

export default {
  
  components: {
    FollwSetInfo,
    LInput,
    LSwitc,
  },

  data() {
    return {
      T:T,
      isShow:false,
      inputSelect:0, //输入框选中标志

      executeId:'', //执行ID
      configMap:'', //执行配置
      followMap:'', //跟单限制

      investNum:'0', //投入数量
      investUsdt:'0', //投入折合
      investCoin:'0', //投入币

      /********** 跟单配置*/
      minInvest:'', //最小跟单
      maxInvest:undefined, //最大跟单
      followName:'', //跟单名称
      mark:[], //标签
      commission:'', //每日佣金
      isVtnEquity:true, //turn 每日佣金带提现权益
    };
  },

  mounted() {

    this.executeId = navigator.getParam("executeId");
    this.followName = navigator.getParam("followName");
    this.configMap = navigator.getParam("configMap");
    this.followMap = navigator.getParam("followMap");

    this.commission = this.followMap.commission;
    this.isVtnEquity = this.followMap.isVtnEquity;

    //用户投入数据----投入数量、投入币、投入折合USD
    var pairMap = navigator.getParam("pairMap");
    var param = this.configMap.tradePairs[0];

    this.investNum = param.investCoinnNum;
    this.investCoin = param.investCoin;
    var xiaoshu = (this.investCoin == param.counterCoin) ? pairMap.counterCoinDecimal : pairMap.baseCoinDecimal;
    xiaoshu = math.getNumber(xiaoshu);
    var investUsdt = param.investCoinnNum;
    if (this.investCoin != 'USDT' && this.target) {
      investUsdt = math.cheng(investUsdt, pairMap.usdPrice, xiaoshu, 2);
    } else if (this.investCoin != 'USDT') {
      investUsdt =math.cheng(investUsdt, pairMap.baseCoinUsdPrice, xiaoshu, 2);
    }
    this.investUsdt = investUsdt;
    
    //投入限制-默认
    this.minInvest = math.getNumber(this.investUsdt) > math.getNumber(this.followMap.maxInvest) ?
                                                      this.followMap.maxInvest : this.investUsdt;
    this.maxInvest = this.followMap.maxInvest;

    this.isShow = true;
  },

  methods: {

    /********************************************** https*/
    //http发起跟单
    httpOpenFollowStrategy(){
      modal.showLoad();

      var info = this.$refs.info.getParam();
      var investLimit = {'minInvest':this.minInvest,
                          'maxInvest':this.maxInvest};

      var param = {'executeId':this.executeId,
                   'followName':info.followName,
                   'mark':info.marks, 
                   'commission':this.commission, 
                   'isVtnEquity':this.isVtnEquity,
                   'investLimit':investLimit};
                   
      weexHttp.postX("follow/openFollowStrategy",{'followConfig':param},true,(data)=>{
        modal.hideLoad();
        if(data.status == 200){
          modal.toast(T('开放跟单成功'));
          broadcast.send(broadcast.EXECUTE_UPDATE);
          broadcast.send('LaunchFollw');
          navigator.back();
        } else {
          modal.toast(data.msg);
        }
      });
    },
    
    /********************************** 点击触发*/
    //菜单
    menuClick(index){
      this.menu = index;
    },

    //支付类型
    payTypeClike(type){
      this.payType = type;
    },

    //取消
    backClick(){
      navigator.back();
    },

    //确定
    okClick(){

      if (this.minInvest.length == 0) {
        modal.toast(T("请输入最小投入"));
        return;
      }

      if (math.getNumber(this.minInvest) < math.getNumber(this.followMap.minInvest)) {
        modal.toast(T("最小投入不可低于") + this.followMap.minInvest + 'USDT');
        return;
      }

      if (this.maxInvest.length == 0) {
        modal.toast(T("请输入最大投入"));
        return;
      }

      if (math.getNumber(this.maxInvest) > math.getNumber(this.followMap.maxInvest)) {
        modal.toast(T("最小投入不可大于") + this.followMap.maxInvest + 'USDT');
        return;
      }

      if (math.getNumber(this.minInvest) > math.getNumber(this.maxInvest)) {
        modal.toast(T("最小投入不可大于最大投入"));
        return;
      }

      if (this.$refs.info.checkError()) {
        return;
      }
     

      if (this.commission.length == 0) {
        modal.toast(T("请输入每日佣金"));
        return;
      }

      if (math.getNumber(this.commission) == 0) {
        modal.toast(T("每日佣金不可为0"));
        return;
      }

      if (math.getNumber(this.commission) > 200) {
        modal.toast(T("每日佣金不可超过200VTN"));
        return;
      }

      this.httpOpenFollowStrategy();
    },
  }
}

</script>


<style src="@/_css/style.css"></style>
<style scoped>
.bg {
  width: 750px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.scroller {
  width: 750px;
  z-index: 9;
}
.wrapper{
  width:750px;
  padding-left: 40px;
  padding-right: 40px;
}

.money{
  margin-top: 40px;
}

.switc{
  width: 670;
  margin-top: 40px;
}

/*************** 其他*/
.line{
  width: 710px;
  height: 1px;
  margin-top: 40px;
  margin-bottom: 40px;
}
.limit-tipe{
  width: 670px;
  line-height: 36px;
}
.add{
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 88px;
  border-radius: 16px;
  padding-left: 40px;
  padding-right: 40px;
  margin-right: -40px;
  margin-left: 20px;
}
.time{
  width: 40px;
  height: 40px;
}

/*************** 输入框*/
.input{
  flex-direction: row;
  align-items: center;
  height: 88px;
  border-radius: 16px;

  border-width: 2px;
  border-color: transparent;

  margin-top: 20px;
  padding-left: 40px;
  padding-right: 40px;
}
.input-content{
  flex: 1;
  height: 88px;
  placeholder-color:#6E7488;
}
.input-line{
  width: 2px;
  height: 32px;
  margin-left: 20px;
  margin-right: 20px;
}
.width252{
  width: 252px;
}
.width380{
  width: 380px;
}
.width670{
  width: 670px;
}

/*************** 付费方式*/
.pay-menu{
  flex-direction: row;
  align-items: flex-end;
  width: 750px;
  height: 84px;
  margin-top: 40px;
  margin-left: -40px;
}
.pay-menu-line{
  height: 1px;
  border-top-width: 2px;
}
.pay-select{
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.pay-menu-but {
  flex-direction: row;
  align-items: flex-end;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 20;
}
.pay-menu-but-left1{
  height: 84px;
  border-top-width: 2px;
  border-right-width: 2px;
  border-top-right-radius: 8px;
}
.pay-menu-but-right1{
  height: 74px;
  border-bottom-width: 2px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}
.pay-menu-but-left2{
  height: 74px;
  border-top-right-radius: 8px;
}
.pay-menu-but-right2{
  height: 84px;
  border-top-width: 2px;
  border-left-width: 2px;
  border-right-width: 2px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}

/*************** 启动*/
.ok{
  flex-direction: row;
  justify-content:space-around;
  width: 750px;
  height: 164px;
  padding-left: 40px;
  padding-right: 40px;
}
.ok-but{
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 80px;
  border-radius: 4px;
  margin-top: 28px;
}

/*************** 间距*/
.height24{
  height: 24px;
}
.height40{
  height: 40px;
}
.height60{
  height: 60px;
}
</style>